import React, {Component} from 'react';
import {connect} from "react-redux";
import {Modal, Table, Tooltip} from 'antd';
import Add from './component/Add'

class VcsList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible: false,
            record: {},
            type: '',
            pageNum: 1,
            pageSize: 10,
            current: 1
        }

        this.columns = [
            {
                title: 'ID',
                dataIndex: 'id',

            },
            {
                title: '客户端',
                render: (_, record) => {
                    return (
                        <div>
                            {record.systemType === 1 ? <a style={{color: "blue"}}>Android</a> : <div>IOS</div>}
                        </div>
                    );
                }
            },
            {
                title: '版本号',
                dataIndex: 'version',

            },
            {
                title: '强制更新',
                dataIndex: 'ifForceUpgrade',
                render: (_, record) => {
                    return (
                        <div>
                            {record.ifForceUpgrade === 1 ? <div style={{color: "red"}}>是</div> : <div>否</div>}
                        </div>
                    );
                }
            },
            {
                title: '更新描述',
                render: (_, record) => {
                    return (
                        <Tooltip placement="top" title={record.upgradeDesc}>
                            <div style={{
                                width: 200,
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap"
                            }}>
                                {record.upgradeDesc}
                            </div>

                        </Tooltip>
                    );
                }
            },


            {
                title: '下载地址',
                dataIndex: 'downloadUrl',

            },
            {
                title: '状态',
                render: (_, record) => {
                    return (
                        <div>
                            {record.status === 1 ? <div>有效</div> : <div style={{color: "gray"}}>无效</div>}
                        </div>
                    );
                }

            }, {
                title: '创建时间',
                dataIndex: 'createTime',

            }, {
                title: '创建人',
                dataIndex: 'createUserId',

            },
            {
                title: '操作',
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.upd(record)} style={{marginLeft: 30}}>编辑</a>
                            <a onClick={() => this.del(record)} style={{marginLeft: 30,color:'red'}}>删除</a>
                        </div>
                    )
                }
            }
        ];
    }

    componentDidMount() {
        this.init();
    }


    init = () => {
        const {vcsList} = this.props
        vcsList({page: 1, size: 10})
    }

    query = (current, pageSize) => {
        const {newValues} = this.props
        newValues.page = current;
        newValues.size = this.state.pageSize;
        this.setState({current})
        this.props.vcsList({...newValues})
    }
    del = (record) => {
        let {newValues,data} = this.props
        newValues.page = data.current;
        this.props.del({id: record.id}).then(res => {
            this.props.vcsList(newValues)
        })
    };
    handleCancel = () => {
        this.setState({
            visible: false
        })
    };
    upd = (record) => {

        this.setState({visible: true, record, type: '1'})
    }

    render() {
        const {data, userLoading, newValues} = this.props;
        const {visible, record, type, current} = this.state;
        const pagination = {
            current: data.current,//当前页
            total: data.total,//总条数
            pageSize: data.size,//页大小
            onChange: this.query,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Table columns={this.columns} loading={userLoading} dataSource={data.records}
                       rowKey={record => record.id} pagination={pagination}/>
                <div>
                    <Modal destroyOnClose visible={visible} title={type === '0' ? "新增" : '编辑'} footer={null}
                           onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <Add handleCancel={this.handleCancel} record={record} type={type}
                             current={current}></Add>
                    </Modal>
                </div>
            </div>

        );
    }
}


const mapState = state => ({
    ...state.vcs
});

const mapDispatch = dispatch => ({
    ...dispatch.vcs

})

export default connect(mapState, mapDispatch)(VcsList);